<template>
	<view class="use-box-model">
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="title-box">
					<view class="title">
						已选 ({{total}})
					</view>
					<view class="lg text-gray cuIcon-close icon-close-box" @click="close">

					</view>
				</view>
				
				<view class="list">
					<view v-if="item.active" class="item" v-for="(item,index) in list" :key="index" >
						<view class="left">
							<view class="img">
								{{item.name.slice(0,1)}}
							</view>
							<view class="info">
								<view class="user-name text-cut">
									{{item.name}}
								</view>
								<view class="user-phone text-cuts">
									手机号：{{item.telphone}}
								</view>
							</view>
						</view>
						<view @click="handleDel(item,index)" class="right">
							删除
						</view>
					</view>
					
					<view class="select-client-box" v-if="!total">
						<data-null ></data-null>
					</view>
				</view>
				
				
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:Array
		},
		data() {
			return {
				modalName: "",
				params: {},
				index:0
			}
		},
		computed:{
			total(){
				return this.list.filter(item=>item.active).length
			}
		},
		methods: {
			open(params) {
				this.modalName = 'bottomModal';
			},
			handleDel(item,index){
				this.$emit('change',index,item)
			},
			close() {
				this.modalName = '';
			},
			handleClose() {
				if (this.params.close) {
					this.params.close()
				}
				this.close()
			},
			handleConfirm() {
				if (this.params.success) {
					this.params.success()
				}
				this.close()
			}
		}
	}
</script>




<style>
	.select-client-box .data-null image{
		  margin-top: 0 !important;
	}
	.use-box-model .cu-dialog {
		width: 100%;
		height: 874rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
</style>


<style lang="scss" scoped>
	
	.list{
		overflow: auto;
		max-height: 720rpx;
		.item{
			padding-bottom: 32rpx;
			margin-bottom: 32rpx;
			border-bottom: 1rpx solid  #f7f7f7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&:last-child{
				border-bottom: none;
			}
			.left{
				display: flex;
				align-items: center;
				.img{
					width: 96rpx;
					height: 96rpx;
					margin-right: 32rpx;
					border-radius: 50%;
					font-size: 40rpx;
					line-height: 96rpx;
					text-align: center;
					background: var(--primaryBg);
					color:#fff;
				}
				.info{
					.user-name{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color:var(--h1Color);
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						margin-bottom: 8rpx;
					}
					.user-phone{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: var(--h3Color);
						line-height: 37rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
			.right{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FF2626;
				line-height: 33rpx;
				text-align: center;
				font-style: normal;
			}
			
		}
	}
			
			
	
	
	
	.use-box-model {
		.cu-dialog {
			padding: 32rpx;
		}

		.title-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 64rpx;
			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: var(--h1Color);
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
			}

			.icon-close-box {
				font-size: 40rpx;
				color:var(--h4Color);
			}
		}

		.bottom-btn {
			width: 100%;
			height: 96rpx;
			background: var(--primaryBg);
			border-radius: 48rpx;
			margin-top: 48rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: var(--btnColor);
			line-height: 45rpx;
			text-align: center;
			font-style: normal;
			display: flex;
			align-items: center;
			justify-content: center;


		}

		.form-box {
			margin-top: 64rpx;

			.form-item {
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #EEEEEE;
				margin-top: 40rpx;

				&:first-child {
					margin-top: 0;
				}

				&:last-child {
					padding-bottom: 0;
					border-bottom: none;
				}

				.num {
					color: #FF9002;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
				}

				.label {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: var(--h1Color);
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
				}

				.input-box {
					margin-top: 24rpx;

					.input {
						padding: 0 28rpx;
						width: 686rpx;
						height: 90rpx;
						background: #F8F8F8;
						border-radius: 8rpx;

						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}
	}
</style>